<template>
  <div>
    <el-dialog
      title="探测器远程控制"
      :visible.sync="dialogVisible"
      width="550px"
      :before-close="closeAddDialog"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :modal="true"
    >
      <div class="container" v-if="tableData.length > 0">
        <div class="item" v-for="(item, index) in tableData" :key="index">
          <div class="index">{{ item.groupNo }}</div>
          <div>
            <div class="circle-title">{{ item.addressMapping }}</div>
            <!-- <div class="circle-box">
                            <div :class="['circle', item.status ? 'active-circle' : '']">
                                <div class="inner" v-if="item.status"></div>
                            </div>
                            <span>{{ item.status == '1' ? '启动' : '停止' }}</span>
                        </div> -->
            <div class="handle">
              <el-button
                class="button-new-tag"
                size="mini"
                type="primary"
                @click="onCommand(item2)"
                v-for="(item2, index2) in item.list"
                :key="index2"
                >{{ item2.keyName }}</el-button
              >
            </div>
          </div>
        </div>
      </div>

      <!-- <div v-else style="
            height: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          ">
                <img :src="wugj" style="width: 120px; height: 120px; margin-bottom: 10px"/>
                <div>无指令下发</div>
            </div> -->
    </el-dialog>
    <!-- 二次确认 -->
    <el-dialog
      title="确认提示"
      :visible.sync="dialogVisibleFinish"
      width="480px"
      :before-close="closeDialogFinish"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :modal="true"
      class="command"
    >
      <div>此操作将下发 {{ keyCommandsend.keyName }} 指令, 是否继续?</div>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          @click="submitFinish"
          v-preventReClick="1000"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <InstructPassword
      ref="refInstructPassword"
      :commandInfo="commandInfo"
      :statusInfo="statusInfo"
       @update="updatePanel"
      pageType="panel"
    />
  </div>
</template>

<script>
import { reqKeyCommandSend, reqDetectorDxtend } from "@/api/api";
import { reqGetBuildingReceiver, reqFire } from "@/api/apiDatav";
import { mapState } from "vuex";
import asc from "@utils/asc.js"; //加密解密
import { log } from "ezuikit-js";
import InstructPassword from "./InstructPassword.vue";

export default {
  props: ["tableData", "detail", "dialogAlarmInfo"],
  components: {
    InstructPassword,
  },
  data() {
    return {
      dialogVisible: false,
      uploadDisabled: false, //加号默认显示
      dialogVisible2: false,
      responderList: [],
      dialogVisibleFinish: false, //二次确认弹窗
      describe:
        "开启火情电话通知会立即发送ai火警语音至所有通知对象，确认是否立即通知？",
      keyCommandsend: {},
      commandInfo: {},
      statusInfo: {
        fireAlarm: "", //火警状态：1-火警 0-未报警
        isMalfunction: "", //故障状态 0正常 1故障
        delayStatus: "", //延时状态：1-延时 0-延时结束
        sysFault: "", //系统故障：1-故障 0-已恢复
        bootUp: "", //启动状态：1-已启动 0-未启动
        mainCircuitWorked: "", //主电工作：1-工作 0-未工作
        feedback: "", //反馈状态：1-已反馈 0-未反馈
        backupCircuitWorked: "", //备电工作：1-工作 0-未工作
        isolate: "", //隔离（屏蔽）状态：1-隔离（屏蔽） 0-未隔离（屏蔽）
        supervise: "", //监管状态：1-监管 0-未监管

        fireFeedback: "", //火警传输 (动作)反馈状态: 1-口反馈 0-未反馈
        fireIsolate: "", //火警传输 隔离(屏蔽)状态:1-隔离(屏蔽)0-未隔离

        sprayRequest: "", //喷洒状态：1-喷洒允许 0-喷洒禁止
        gasSpraying: "", //喷洒状态：1-喷洒中 0-未喷洒

        audibleVisualMute: "", //声光报警 消音状态:1-已消音 0-未消音
        audibleVisualIsolate: "", //声光报警 隔离(屏蔽)状态:1-隔离(屏蔽)0-未隔离
        audibleVisualFault: "", //声光报警 故障:1-故障 0-已恢复
      },
    };
  },
  computed: {
    ...mapState(["user", "datav"]),
  },
  watch: {
    dialogVisible(e) {
      if (e) {
        if (this.dialogAlarmInfo.subDeviceCode) {
          this.getDetectorDxtend(this.dialogAlarmInfo.subDeviceCode); //状态信息
        }
      }
    },
  },
  methods: {
     updatePanel() {
      setTimeout(() => {
        this.getDetectorDxtend();
      }, 3000);
    },
    //  探测器查询主机 状态信息
    async getDetectorDxtend(imei) {
      let res = await reqDetectorDxtend({
        deviceCode: imei,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      console.log(this.statusInfo, "this.statusInfo ");
      this.statusInfo = res.data.detail;
    },
    onCommand(item) {
      this.commandInfo = JSON.parse(JSON.stringify(item));
      this.$refs.refInstructPassword.dialogVisible = true;
      //  this.dialogVisibleFinish = true;
      //   this.keyCommandsend = item;
    },
    async submitFinish() {
      var res = await reqKeyCommandSend({
        // "deviceCode": this.detail.parentDeviceCode,//父设备编号
        deviceCode: this.keyCommandsend.deviceCode, //父设备编号
        id: this.keyCommandsend.id,
      });
      if (res.code !== 20000) {
        this.dialogVisibleFinish = false;
        this.$modal.notifyWarning(res.message);
        return;
      }
      this.$modal.notifySuccess("指令下发成功");
      this.dialogVisibleFinish = false;
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.dialogVisible = false;
    },
    closeDialogFinish() {
      this.dialogVisibleFinish = false;
    },
  },
  mounted() {},
  created() {},
};
</script>

<style lang="less" scoped>
// 二次确认弹窗样式
::v-deep .el-dialog__body {
  background: #35437e !important;
  min-height: 50px !important;
  // height: 200px !important;
}

// 弹窗样式
::v-deep .el-dialog {
  // height: 400px !important;
}

::v-deep .el-dialog__footer {
  background: #35437e !important;
}

::v-deep .el-button.el-button--default {
  background: #17286a !important;
  border: 1px solid #17286a !important;
  color: #d1d1d1 !important;
}

::v-deep .el-button.el-button--primary {
  background: #000f4a !important;
  border: 1px solid #00edfe !important;
  color: #d1d1d1 !important;
}

::v-deep .el-input__inner {
  background: #01101d !important;
}

::v-deep .el-textarea__inner {
  background: #01101d !important;
  resize: none;
}

::v-deep .el-upload--picture-card {
  // width: 75px;
  // height: 75px;
  // line-height: 85px;
  background: #01101d;
  border: none;
}

// 单选按钮
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #7367f0;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #7367f0;
  background: #7367f0;
}

/* 未选中状态的样式 */
::v-deep .el-radio {
  color: #cfd3ec;
}

// 折叠
::v-deep .el-collapse-item__header {
  background: #fff;
  border: none;
}

::v-deep .el-collapse-item__wrap {
  border: none;
}

// 折叠
.el-collapse {
  width: 100%;
  border-top: none;
  border-bottom: none;
}

::v-deep .el-collapse-item__header {
  color: #cfd3ec;
  font-size: 14px;
  background-color: transparent;
  border: none;
  border-radius: 5px !important;
}

::v-deep .el-collapse-item__content {
  color: #fff;
  font-size: 13px;
  border: none !important;
  padding: 0;
  background-color: transparent !important;
  border-radius: 0 0 5px 5px !important;
  max-height: 16vh;
  overflow-y: auto;
}

::v-deep .el-collapse-item__wrap {
  border: none;
  background-color: transparent;
}

::v-deep .el_button.el-button {
  background: transparent !important;
  border: transparent !important;
}

::v-deep .el-collapse-item__arrow {
  margin: 0 0px 0 auto;
}

.custom-title {
  display: flex;
  align-items: baseline;
}

/* 定义滚动条样式 */
::v-deep .el-collapse-item__content::-webkit-scrollbar {
  display: block;
  width: 8px; //定义滚动条宽度
  height: 10px; //定义滚动条高度
  border-radius: 10px; //定义滚动条圆角
  // background-color: red; //定义滚动条颜色
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-collapse-item__content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义轨道阴影
  border-radius: 10px; //定义轨道圆角
  background-color: #04306f; //定义轨道颜色
}

/*定义滑块 内阴影+圆角*/
::v-deep .el-collapse-item__content::-webkit-scrollbar-thumb {
  border-radius: 10px; //定义滑块圆角
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义滑块阴影
  background-color: #0270ad; //定义滑块颜色
}

.container {
  max-height: 85%;
  overflow-y: auto;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;

  .item-radio {
    position: relative;
    padding: 10px 15px;
    margin: 5px 5px;
    text-align: center;
  }

  .item {
    position: relative;
    // width: 180px;
    flex: 1;
    // height: 120px;
    // height: 14.5vh;
    // height: 9vh;
    // border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #58c0f9 !important;
    background: #11295e !important;
    padding: 15px 4px;

    .index {
      position: absolute;
      top: 5px;
      left: 5px;
      color: #999;
    }

    .handle {
      display: flex;
      justify-content: center;
    }
  }

  .circle-title {
    text-align: center;
    margin-bottom: 10px;
  }

  .circle-box {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .circle {
      width: 12px;
      height: 12px;
      border: 1px solid #999;
      background: #fff;
      border-radius: 50%;
      margin-right: 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      .inner {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #fff;
      }
    }

    .active-circle {
      background: #7367f0;
      border-color: #7367f0;
    }
  }
}
// 二次确认弹窗样式
::v-deep .command .el-dialog__body {
  min-height: 50px !important;
}
</style>
